import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, List, InputItem, Button } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'

const pageName = 'questionMsg'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends ListMixin {
	constructor(props) {
    super(props);
		this.searchOption = {
			questionId: this.props.params.id
		}
    this.state = Object.assign({
      msgData: {}
    }, this.state);
		this.msgApi = '/question/get';
    this.listApi = '/question/getreplylist';
    this.fetchMsg();
  }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="question-item">
          <img className="img" src={`${imgBaseUrl}${rowData.userImg}`}/>
          <div className="right">
            <div className="t"><span>{parseInt(rowID) + 1}楼</span>{rowData.userNickname}</div>
            <p className="p">{rowData.createTime}</p>
            <div className="con">
              {rowData.content}
            </div>
          </div>
        </div>
      );
  }

  fetchMsg = () => {
    var self = this;
    Ajax({
      url: this.msgApi,
      data: this.searchOption,
      success: function(result){
        self.setState({
          msgData: result
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

  submit = ()=>{
    const self = this;
		const { userData } = this.props.appStore;
    Ajax({
      url: '/question/reply',
      data: Object.assign({
        content: self.props.form.getFieldValue('content')
      }, this.searchOption),
      success: function(result){
        // self.state.dataSource.push(result)
        // self.setState({
        //   dataSource: self.state.dataSource,
        // });
        Toast.info('回复成功');
        const obj = {};
				result.userNickname = userData.userNickname;
				result.userImg = userData.img;
        obj[self.state.totalCount] = result;
        self.rData = { ...self.rData, ...obj };
        self.setState({
          dataSource: self.state.dataSource.cloneWithRows(self.rData),
          totalCount: self.state.totalCount + 1
        });
        self.props.form.resetFields();
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.setState({
          isLoading: false
        });
      }
    });
  }

  render() {
    const pageData = this.props.languageStore.getPageData(pageName);
    const { coverImg, content, title, createTime, userId, countryId, userImg, userNickname } = this.state.msgData;
    const { imgBaseUrl } = this.props.appStore;
    const {getFieldProps} = this.props.form;
    return (
    	<div className={pageName}>
        <Top
          title={pageData.title}
        />
        <div className={`${pageName}-content`}>
          <div className="que-temp">
            <div className="question-item">
              <img className="img" src={`${imgBaseUrl}${userImg}`}/>
              <div className="right">
                <div className="t"><span>{this.props.appStore.getNameById('countryEn', countryId)}</span>{userNickname}</div>
                <p className="p">{createTime}</p>
                <div className="con">
                  {title}
                </div>
                <div className="con">
                  {content}
                </div>
              </div>
            </div>
            <div className="blank" style={{height: '.2rem'}}></div>
          </div>
          <div className="huifu-list">
            <ListView ref="lv"
              renderHeader={() => <span>{this.state.totalCount}条评论</span>}
              dataSource={this.state.dataSource}
              renderFooter={this.renderFooter}
              renderRow={this.renderRow}
              className="fortest"
              pageSize={4}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onScroll={() => { console.log('scroll'); }}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={10}
              stickyHeader
            />
          </div>
          <div className="fix-input">
            <List>
              <InputItem
                {...getFieldProps('content')}
                placeholder="输入你想说的话"
                extra={<Button type='primary' onClick={this.submit}>发送</Button>}
              ></InputItem>
            </List>
          </div>
        </div>
    	</div>
    )
  }
}

module.exports = createForm()(ModuleName)
